<template>
	<div>
		<div id="app" class="wrapper wrapper-content">
			<div class="row">
				<div>
					<div class="panel panel-primary">
						<div class="panel-body" style="padding: 0px 120px; box-sizing: border-box;">
							<el-form size="small" :model="inputForm" ref="inputForm" v-loading="loading"
								:disabled="formReadOnly">
								<div style="text-align:center">
									<h3 style="font-weight: bold;color: black;font-size:24px">入职申请单</h3>
								</div>
								<table
									style="margin:0 auto;width:80%;margin-top:20px;border-collapse: collapse;margin-bottom:20px">
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/work.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											基本信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请人</td>
										<td class="width-30">
											<el-form-item prop="applyuser.id">
												<user-select :limit='1' :value="inputForm.applyuser.id"
													@getValue='(value) => { inputForm.applyuser.id = value }' disabled>
												</user-select>
											</el-form-item>
										</td>
										<td class="width-15">所属公司</td>
										<td class="width-30">
											<el-form-item prop="company.id">
												<el-input disabled v-model="inputForm.company.name"></el-input>
												<!-- <SelectTree ref="company" :props="{
													value: 'id',             // ID字段名
													label: 'name',         // 显示名称
													children: 'children'    // 子级字段名
												}" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.company.id" :clearable="true" :accordion="true"
													@getValue="(value) => { inputForm.company.id = value }" /> -->
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15">申请时间</td>
										<td class="width-30">
											<el-form-item prop="applydate">
												<el-date-picker v-model="inputForm.applydate" type="datetime"
													style="width: 100%;" disabled value-format="yyyy-MM-dd HH:mm:ss"
													:clearable="false" placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15">所属部门</td>
										<td class="width-30">
											<el-form-item prop="depart.id">
												<el-input disabled v-model="inputForm.depart.name"></el-input>
												<!-- <SelectTree ref="depart" :props="{
													value: 'id',             // ID字段名
													label: 'name',         // 显示名称
													children: 'children'    // 子级字段名
												}" disabled url="/sys/office/treeData?type=2"
													:value="inputForm.depart.id" :clearable="true" :accordion="true"
													@getValue="(value) => { inputForm.depart.id = value }" /> -->
											</el-form-item>
										</td>
									</tr>
									<tr style="line-height: 3.5;">
										<td colspan="4"
											style="font-weight: bold;text-align: left;padding-left: 32px;position: relative;font-size: 14px">
											<img src="../../../../../assets/imgs/processManagement/basic.png" alt=""
												style="position: absolute;width: 20px;height: 20px;left: 0px;top: 14px;margin-left: 8px">
											入职信息
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>员工姓名</td>
										<td class="width-30">
											<el-form-item prop="name"
												:rules="[{ required: true, message: '员工姓名不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.name"></el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>员工性别</td>
										<td class="width-30">
											<el-form-item prop="sex"
												:rules="[{ required: true, message: '员工性别不能为空', trigger: 'blur' }]">
												<el-select v-model="inputForm.sex" placeholder="请选择" style="width: 100%;">
													<el-option v-for="item in $dictUtils.getDictList('sex')"
														:key="item.value" :label="item.label" :value="item.value">
													</el-option>
												</el-select>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>员工电话</td>
										<td class="width-30">
											<el-form-item prop="phone"
												:rules="[{ required: true, message: '员工电话不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.phone"></el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>身份证号</td>
										<td class="width-30">
											<el-form-item prop="idcard"
												:rules="[{ required: true, message: '身份证号不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.idcard"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHiddens  errorMsg">
										<td class="width-15"><span style="color: red">*&nbsp;</span>岗位</td>
										<td class="width-30">
											<el-form-item prop="postname.id"
												:rules="[{ required: true, message: '岗位不能为空', trigger: 'blur' }]">
												<el-select v-model="inputForm.postname.id" placeholder="请选择"
													style="width: 100%">
													<el-option v-for="(item, index) in findPost" :label="item.name"
														:key="index" :value="item.id"></el-option>
												</el-select>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>角色</td>
										<td class="width-30">
											<el-form-item prop="roleId"
												:rules="[{ required: true, message: '角色不能为空', trigger: 'blur' }]">
												<el-select v-model="inputForm.roleIds" placeholder="请选择" multiple
													@change="addRoles" style="width: 100%">
													<el-option v-for="(item, index) in roleIdLists" :label="item.name"
														:key="index" :value="item.id"></el-option>
												</el-select>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>登录名</td>
										<td class="width-30">
											<el-form-item prop="loginname"
												:rules="[{ required: true, message: '登录名不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.loginname"></el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>密码</td>
										<td class="width-30">
											<el-form-item prop="password"
												:rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.password"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHiddens  errorMsg">
										<td class="width-15"><span style="color: red">*&nbsp;</span>归属部门</td>
										<td class="width-30">
											<el-form-item prop="office.id"
												:rules="[{ required: true, message: '归属部门不能为空', trigger: 'blur' }]">
												<el-select v-model="inputForm.office.id" placeholder="请选择"
													style="width: 100%">
													<el-option v-for="(item, index) in offices" :label="item.name"
														:key="index" :value="item.id"></el-option>
												</el-select>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>开户行</td>
										<td class="width-30">
											<el-form-item prop="bankofdeposit"
												:rules="[{ required: true, message: '开户行不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.bankofdeposit"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>行号</td>
										<td class="width-30">
											<el-form-item prop="banknumber"
												:rules="[{ required: true, message: '行号不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.banknumber"></el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>银行账号</td>
										<td class="width-30">
											<el-form-item prop="bankaccount"
												:rules="[{ required: true, message: '银行账号不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.bankaccount"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>员工状态</td>
										<td class="width-30">
											<el-form-item prop="staffstatus"
												:rules="[{ required: true, message: '员工状态不能为空', trigger: 'blur' }]">
												<el-select v-model="inputForm.staffstatus" placeholder="请选择"
													style="width: 100%;">
													<el-option v-for="item in $dictUtils.getDictList('work_status')"
														:key="item.value" :label="item.label" :value="item.value">
													</el-option>
												</el-select>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>合同形式</td>
										<td class="width-30">
											<el-form-item prop="contractform"
												:rules="[{ required: true, message: '合同形式不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.contractform"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>岗位绩效金额</td>
										<td class="width-30">
											<el-form-item prop="jobperformance"
												:rules="[{ required: true, message: '岗位绩效金额不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.jobperformance"></el-input>
											</el-form-item>
										</td>
										<td class="width-15"><span style="color: red">*&nbsp;</span>岗位工资</td>
										<td class="width-30">
											<el-form-item prop="postsalary"
												:rules="[{ required: true, message: '岗位工资不能为空', trigger: 'blur' }]">
												<el-input v-model="inputForm.postsalary"></el-input>
											</el-form-item>
										</td>
									</tr>
									<tr class="iconHidden">
										<td class="width-15"><span style="color: red">*&nbsp;</span>到岗日期</td>
										<td class="width-30">
											<el-form-item prop="posttime"
												:rules="[{ required: true, message: '到岗日期不能为空', trigger: 'blur' }]">
												<el-date-picker v-model="inputForm.posttime" type="date"
													style="width: 100%;" value-format="yyyy-MM-dd" :clearable="false"
													placeholder="请选择">
												</el-date-picker>
											</el-form-item>
										</td>
										<td class="width-15"></td>
										<td class="width-30"></td>
									</tr>
									<tr style="height: 80px;line-height: 80px">
										<td class="width-15 active" style="line-height: 80px">备注信息
										</td>
										<td colspan="4" style="padding:0 10px">
											<el-form-item prop="remarks">
												<el-input v-model="inputForm.remarks"></el-input>
											</el-form-item>
										</td>
									</tr>
								</table>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import UserSelect from '@/components/userSelect'
import SelectTree from '@/components/treeSelect/treeSelect.vue'
import GridSelect from '@/components/gridSelect'
import tableStyles from '../../../../../utils/mixins.js'
export default {
	mixins: [tableStyles],
	data() {
		return {
			title: '',
			method: '',
			loading: false,
			inputForm: {
				id: '',
				applyuser: {
					id: ''
				},
				company: {
					id: ''
				},
				applydate: '',
				depart: {
					id: ''
				},
				name: '',
				sex: '',
				phone: '',
				idcard: '',
				postname: {
					id: ''
				},
				roleId: '',
				roleIds: [],
				loginname: '',
				password: '',
				office: {
					id: ''
				},
				bankofdeposit: '',
				banknumber: '',
				bankaccount: '',
				staffstatus: '',
				contractform: '',
				jobperformance: '',
				postsalary: '',
				posttime: '',
				remarks: ''
			},
			findPost: [], //岗位
			roleIdLists: [], //角色
			offices: [], //归属部门
		}
	},
	props: {
		businessId: {
			type: String,
			default: ''
		},
		formReadOnly: {
			type: Boolean,
			default: false
		}
	},
	components: {
		UserSelect,
		SelectTree,
		GridSelect
	},
	watch: {
		'businessId': {
			handler(newVal) {
				if (this.businessId) {
					this.init(this.businessId)
				} else {
					this.$nextTick(() => {
						this.$nextTick(() => {
							this.$refs.inputForm.resetFields();
							if (this.$store.state.user.id != '') {
								var users = this.$store.state.user
							} else {
								var users = JSON.parse(sessionStorage.getItem("userInfo"));
							}
							this.inputForm.applyuser.id = users.id;
							this.inputForm.company.id = users.company.id;
							this.inputForm.depart.id = users.office.id;
							this.inputForm.applydate = this.getNowTime();
						})
					})
				}
			},
			immediate: true,
			deep: false
		}
	},
	mounted() {
		if (this.businessId) {
			this.init(this.businessId)
		}
		this.findPosts();
		this.getRole();
		this.departments();
	},
	created() {
		window.addEventListener("beforeunload", () => {
			sessionStorage.setItem("userInfo", JSON.stringify(this.$store.state.user))
		})
	},
	methods: {
		init(id) {
			if (id) {
				this.loading = true
				this.inputForm.id = id
				this.$nextTick(() => {
					this.$refs.inputForm.resetFields()
					this.$http({
						url: `/dlyrl/oa/applyentry/oaApplyEntry/queryById?id=${this.inputForm.id}`,
						method: 'get'
					}).then(({
						data
					}) => {
						this.inputForm = this.recover(this.inputForm, data.oaApplyEntry);
						this.inputForm = data.oaApplyEntry;
						console.log(this.inputForm , 333333)
						this.inputForm.roleIds = this.inputForm.roleId.split(",")
						this.loading = false
					})
				})
			}
		},
		//岗位
		findPosts() {
			this.findPost = [];
			this.$http({
				url: "/sys/web/userinfo/findPost",
				method: "get",
				params: {},
			}).then(({
				data
			}) => {
				if (data) {
					this.findPost = data.post;
				}
			});
		},
		//角色
		getRole() {
			this.roleIdLists = [];
			this.$http({
				url: "/sys/web/userinfo/findRole",
				method: "get",
			}).then(({
				data
			}) => {
				if (data) {
					this.roleIdLists = data.role;
				}
			});
		},
		addRoles(e) {
			this.inputForm.roleIds = [];
			for (var i = 0; i < e.length; i++) {
				this.inputForm.roleIds.push(e[i])
			}
			this.inputForm.roleId = this.inputForm.roleIds.join(",");
		},
		//	归属部门
		departments() {
			this.offices = [];
			this.$http({
				url: "/sys/web/userinfo/findDepartemnt",
				method: "get",
				params: {
					id: this.$store.state.user.companyId
				},
			}).then(({
				data
			}) => {
				if (data) {
					this.offices = data.list;
				}
			});
		},
		// 表单提交
		saveForm(callback) {
			this.$refs['inputForm'].validate((valid) => {
				if (valid) {
					this.loading = true
					this.$http({
						url: `/dlyrl/oa/applyentry/oaApplyEntry/save`,
						method: 'post',
						data: {
							companyId: this.$store.state.user.companyId,
							...this.inputForm
						}
					}).then(({
						data
					}) => {
						if (data && data.success) {
							callback(data.businessTable, data.businessId);
							this.loading = false;
							this.$refs.inputForm.resetFields();
							this.inputForm.applyuser.id = this.$store.state.user.id;
							this.inputForm.company.id = this.$store.state.user.company.id;
							this.inputForm.depart.id = this.$store.state.user.office.id;
							this.inputForm.applydate = this.getNowTime();
						}
					})
				}
			})
		}
	}
}
</script>
